Ext.define("Bible.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',
        'Ext.Picker',
        'Bible.picker.Chapter'
    ],
    
    config: {
        tabBarPosition: 'bottom',
        fullscreen: true,
        
        items: [
            {
                xtype: 'biblepanel'
            },
            {
                title: 'Setari',
                iconCls: 'settings',
                html: 'TODO settings'
            },
            {
                title: 'User',
                iconCls: 'user',
                html: 'TODO login'
            },
            {
                title: 'Chapters',
                iconCls: 'more',
                html: 'Pickers',
                items: {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: {
                        pack: 'center',
                        align: 'center'
                    },
                    items: [
                        {
                            text: 'Picker',
                            xtype: 'button',
                            handler: function(){
                                var picker = Ext.create('Ext.Picker', {
                                    value: 100,
                                    _value: 100,
                                    slots: [
                                        {
                                            name : 'limit_speed',
                                            title: 'Speed',
                                            data : [
                                                {text: '50 KB/s', value: 50},
                                                {text: '100 KB/s', value: 100},
                                                {text: '200 KB/s', value: 200},
                                                {text: '300 KB/s', value: 300}
                                            ]
                                        }
                                    ]
                                });
                                Ext.Viewport.add(picker);
                                picker.show();
                            }
                        },
                        {
                            text: 'Date',
                            xtype: 'button',
                            handler: function(){
                                if(!this.picker1){
                                    this.picker1 = Ext.Viewport.add({
                                        xtype: 'datepicker',
                                        height: '100%',
                                        yearFrom: 2010,
                                        yearTo  : 2015,
                                        //value: {year: 2011, day: 1, month: 5}
                                        value: new Date()
                                    });
                                }
                                this.picker1.show();
                            }
                        },
                        {
                            text: 'Chapter',
                            xtype: 'button',
                            handler: function(){
                                if(!this.picker2){
                                    this.picker2 = Ext.Viewport.add({
                                        xtype: 'biblechapterpicker',
                                        value: {
                                            book: 2,
                                            chapter: 4
                                        }
                                    });
                                }
                                this.picker2.show();
                            }
                        }
                    ]
                }
            }
        ]
    }
});